<template>
  <!-- 3. (可选) 修改最外层容器的类名，让它更有意义 -->
  <div class="teacher-list"> 
    <div class="header-container">
      <h2>教师信息列表</h2>
    </div>
    <div class="table-container">
      <table>
      <thead>
        <tr>
          <!-- 1. 修改表头，以匹配教师信息 -->
          <th>工号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>手机号</th>
          <th>所教课程</th>
        </tr>
      </thead>
      <tbody>
        <!-- 注意：这里的 v-for 变量名改为了 teacher，更易读 -->
        <tr v-for="teacher in teachers" :key="teacher.id">
          <!-- 2. 修改绑定的字段名，以匹配后端 Teacher 实体类的属性 -->
          <td>{{ teacher.jobId }}</td>
          <td>{{ teacher.name }}</td>
          <td>{{ teacher.gender }}</td>
          <td>{{ teacher.age }}</td>
          <td>{{ teacher.phone }}</td>
          <td>{{ teacher.course }}</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  // 1. 修改组件名称
  name: 'TeacherList',
  data() {
    return {
      // 2. 修改数据属性名，让它更符合内容
      teachers: []
    }
  },
  created() {
    this.fetchTeacherData();
  },
  methods: {
    // 3. 修改方法名，让它更符合功能
    fetchTeacherData() {
      // 4. **核心修改：** 将 API 请求地址修改为后端的教师信息接口
      axios.get('http://localhost:8080/teachers/getAllTeachers')
        .then(response => {
          // 5. 将获取到的数据赋值给 teachers 数组
          this.teachers = response.data;
        })
        .catch(error => {
          console.error("获取教师信息时出错!", error);
          alert("教师数据加载失败！请检查后端服务。");
        });
    }
  }
}
</script>

<style scoped>
.teacher-list {
  width: 100%;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  transition: all 0.3s ease;
}

/* 设置标题容器 */
.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
}

h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
  text-align: center;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #5e72e4, #2c7be5);
  border-radius: 3px;
}

.table-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

table {
  width: 95%;
  max-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

th, td {
  padding: 15px 18px;
  text-align: center;
}

th {
  background: linear-gradient(to right, #2c7be5, #5e72e4);
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  position: relative;
}

th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

td {
  border-bottom: 1px solid #edf2f7;
  font-size: 15px;
  color: #4a5568;
  transition: all 0.2s ease;
}

/* 设置表格主体行的样式 */
tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* 设置鼠标悬停在行上的效果 */
tbody tr:hover {
  background-color: #edf2f7;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

tbody tr:hover td {
  color: #2c7be5;
}

/* 移除最后一行多余的底部边框 */
tbody tr:last-child td {
  border-bottom: none;
}

/* 添加响应式设计 */
@media (max-width: 768px) {
  .teacher-list {
    max-width: 95vw;
    width: 95vw;
    padding: 15px;
  }
  
  th, td {
    padding: 12px 10px;
    font-size: 14px;
  }
  
  h2 {
    font-size: 20px;
  }
}
</style>